<template>
	<view class="" :style="[AppSkinVar]">
		<view class="e-p-20">
			<view class="e-flex attract-invest-header" :style="{background: AppSkin.gradientPrimary}">
				<view class="e-flex-column e-flex-xy-center e-flex-1">
					<view class="c-white fw-600 e-font-48 e-m-b-20">
						240
					</view>
					<view class="c-white e-font-26">
						{{$t('attractInvest.招商数量')}}
					</view>
				</view>
				<view class="opacity-2-72">
					
				</view>
				<view class="e-flex-column e-flex-xy-center e-flex-1">
					<view class="c-white fw-600 e-font-48 e-m-b-20">
						50.00
					</view>
					<view class="c-white e-font-26">
						{{$t('attractInvest.奖励金额')}}
					</view>
				</view>
			</view>
		</view>
		<view class="attract-invest-tab e-flex bg-white e-font-28">
			<view class="e-flex-1 e-rela e-flex-xy-center h-100" :class="{'c-333':activeIndex === 1, 'c-666':activeIndex !== 1}" @tap="handleTab(1)">
				<text>{{$t('attractInvest.招商店铺')}}</text>
				<view class="e-abso tab-line" :style="{background: AppSkin.primary}" v-if="activeIndex === 1">
					
				</view>
			</view>
			<view class="e-flex-1 e-rela e-flex-xy-center h-100" :class="{'c-333':activeIndex === 2, 'c-666':activeIndex !== 2}" @tap="handleTab(2)">
				<text>{{$t('attractInvest.奖励明细')}}</text>
				<view class="e-abso tab-line" :style="{background: AppSkin.primary}" v-if="activeIndex === 2">
					
				</view>
			</view>
		</view>
		<view class="" v-if="activeIndex === 1">
			<view class="e-p-20">
				<view class="search-box e-flex e-p-l-20 e-p-r-20">
					<view class="iconfont icon-sousuo e-m-r-20" style="color: #B3B3B3;">
						
					</view>
					<input border="none" :placeholder="$t('请输入店铺名称或ID搜索')"/>
				</view>
			</view>
			<scroll-view class="scroll-view-box-1" scroll-y @scrolltolower="getData" lower-threshold="60">
				<view class="e-p-l-20 e-p-r-20">
					<view class="e-radius-20 bg-white flex-box" v-for="(item,index) in list">
						<image class="img-84" :src="$staticPath('attractInvest/default_store.png')" mode=""></image>
						<view class="e-flex-1 e-p-l-20 e-p-r-20">
							<view class="c-333 e-font-28 fw-600 e-m-b-10">
								店铺名称
							</view>
							<view class="c-333 e-font-24 e-m-b-10">
								ID：577508761393041408
							</view>
							<view class="c-333 e-font-24 e-m-b-10">
								<text>{{$t('attractInvest.总流水金额')}}：</text>
								<text class="c-red">10000000</text>
							</view>
							<view class=" e-font-24 e-m-b-10" style="color: #B3B3B3;">
								2022-03-17 23:00:00
							</view>
						</view>
						<view class="c-secondary e-font-24">
							{{$t('attractInvest.营业中')}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="" v-else>
			<scroll-view class="scroll-view-box-2" scroll-y @scrolltolower="getData" lower-threshold="60">
				<view class="e-p-l-20 e-p-r-20 e-p-t-20">
					<view class="e-radius-20 bg-white e-flex e-p-l-20 e-p-r-20 e-p-t-32 e-p-b-30" v-for="(item,index) in list">
						<view class="e-p-r-20 e-flex-1">
							<view class="e-m-b-10 e-font-28 c-333">
								奖励-这里是店铺名称
							</view>
							<view class="e-font-26 c-secondary">
								2021-02-01 12:00:00
							</view>
						</view>
						<view class="c-primary e-font-32 fw-600">
							+1000.00
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	
	const {AppSkin} = storeToRefs(useInit())
	
	const activeIndex = ref(1)
	const list = ref([{}])
	const handleTab = (index:number) => {
		activeIndex.value = index
	}
	const getData = () => {
		
	}

</script>

<style lang="scss" scoped>
	.attract-invest-header {
		border-radius: 10rpx;
		height: 216rpx;
	}
	.opacity-2-72 {
		opacity: 0.2;
		width: 1px;
		height: 72rpx;
		background: #FFFFFF;
	}
	.attract-invest-tab {
		height: 100rpx;
		width: 100vw;
	}
	.h-100 {
		height: 100rpx;
	}
	.tab-line {
		width: 64rpx;
		height: 6rpx;
		border-radius: 3rpx;
		bottom: 0;
	}
	.search-box {
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
	}
	.scroll-view-box-1 {
		height: calc(100vh - 216rpx - 40rpx - 100rpx - 120rpx);
	}
	.scroll-view-box-2 {
		height: calc(100vh - 216rpx - 40rpx - 100rpx);
	}
	.flex-box {
		display:flex;
		padding: 30rpx 20rpx;
	}
</style>